<template>
    <div class='matchingRules'>
        <div class="title">绩效工资匹配规则</div>
        <div class="tabs">
            <el-tabs v-model="tabName" @tab-click="handleTabClick">
                <el-tab-pane label="执行中" name="1"></el-tab-pane>
                <el-tab-pane label="草稿" name="2"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="tip">{{ tip }}</div>
        <com :is='comName'></com>
    </div>
</template>

<script>
import draft from './components/draft'
import inExecution from './components/inExecution'
export default {
    data() {
        return {
            tabName: '1',
            comName: 'inExecution',
            tip: '绩效工资匹配规则执行中：您可以查看生效的绩效工资匹配规则，如需调整，请在草稿页签中修改。点击生效转成执行中规则。'
        }
    },
    components: {
        draft,
        inExecution
    },
    methods: {
        handleTabClick() {
            if(this.tabName == '1') {
                this.comName = 'inExecution'
                this.tip = '绩效工资匹配规则执行中：您可以查看生效的绩效工资匹配规则，如需调整，请在草稿页签中修改。点击生效转成执行中规则。'
            } else {
                this.comName = 'draft'
                this.tip = '绩效工资匹配规则草稿：您可以修改系统内置的绩效工资匹配规则，生效后草稿规则将转成执行中'
            }
        }
    }
}
</script>

<style lang="less" scoped>
.matchingRules {
    padding: 20px;
    height: calc(100% - 50px);
    overflow: auto;
    .title {
        color: #1f273d;
    }
    .tabs {
        padding: 20px 0 10px 0;
    }
    .tip {
        font-size: 12px;
        font-weight: bolder;
        margin-bottom: 20px;
    }
}
</style>